<style scoped>
    .layui-form >>> .layui-form-select{
        z-index: inherit;
    }
</style>

<template>
    <div class="department">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>分配客户</legend>
        </fieldset>

        <form class="layui-form " >
            <div class="layui-form-item">
                <label class="layui-form-label">客户</label>
                <div class="layui-input-inline">
                    <select name="customerid" id="customerid" lay-filter="customerid" multiSelect lay-search lay-verify="required" >
                        <option value="">请选择客户</option>
                        <option v-for="(item, index) in customers" :key="item.guid" :value="item.guid">{{item.name}}</option>
                    </select>
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">管理类型</label>
                <div class="layui-input-inline">
                    <select name="type" id="type" lay-filter="type" multiple lay-search lay-verify="required" >
                        <option value="">请选择管理类型</option>
                        <option v-for="(item, index) in typeEmnu" :key="item.dictkey" :value="item.dictkey">{{item.dicttext}}</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item" id="selleridDiv">
                <label class="layui-form-label" >客户经理 </label>
                <div class="layui-input-inline">
                    <select name="sellerid" id="sellerid" lay-filter="hc_select" class="layui-form-select" lay-search lay-verify="required" >
                        <option value="">请选择客户经理</option>
                        <option v-for="(item, index) in users" :key="item.guid" :value="item.guid">{{item.realname}} ({{item.telphone}})</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item" id="departidDiv">
                <label class="layui-form-label">所属部门</label>
                <div class="layui-input-inline">
                    <select name="departid" id="departid" lay-filter="departid" multiple lay-search>
                        <option value="">请选择所属部门</option>
                        <option v-for="(item, index) in departments" :key="item.guid" :value="item.guid">{{item.name}}</option>
                    </select>
                </div>
            </div>




            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
                    <button class="layui-btn layui-btn-primary" @click="$parent.back">返回</button>
                </div>
            </div>
        </form>
    </div>
</template>

<script>
    let qs = require('qs');

    export default {
        name: 'AssignAdd',
        data () {
            return {
                customers: [],
                departments: [],
                users:[],
                typeEmnu:[]
            }
        },
        mounted() {
            let that = this;
            this.getDeparts();
            this.getCustomer();
            this.send();
            this.getUserAll();
            this.getDictEmnu()
            that.hideSelect("departid")
            that.hideSelect("sellerid")
        layui.use(['layer', 'jquery', 'form'], function () {
                    var layer = layui.layer,
                        form = layui.form;
            form.on('select(type)', function(data){
                var data = data.value;

                if(data == 1){
                    that.hideSelect("sellerid")
                    that.showSelect("departid")
                }else if(data == 2) {
                    that.showSelect("sellerid")
                    that.hideSelect("departid")
                }else{
                    that.hideSelect("departid")
                    that.hideSelect("sellerid")
                }
            });
            });
        },
        updated: function () {
            layui.form.render('select');
            layui.form.render();
        },
        methods: {
            getDeparts: function() {
                this.$post('/sales/Department!listAll.action', qs.stringify({type: 1}))
                    .then(response => {
                        let data = response.data;
                        if (data.info != 'error') {
                            this.departments = data.info;
                        } else {
                            this.toast('获取部门数据失败！');
                        }
                    })
            },
            getCustomer: function() {
                this.$post('/sales/Sellform!findCustomer.action')
                    .then(response => {
                        let data = response.data;
                        if (data.status == 'true') {
                            this.customers = data.result;
                        } else {
                            this.toast('获取客户数据失败！');
                        }
                    })
            },
            /**
             * 2020-3-30
             * Liukx
             * 关联销售人员与客户
             */
            getUserAll: function() {
                this.$post('/system/Tuser!getUserAll.action')
                    .then(response => {
                        let data = response.data;
                        if (data.info != 'error') {
                            this.users = data.info== null?"":data.info;
                        } else {
                            this.toast('获取销售人员失败！');
                        }
                    })
            },
            /**
             * 2020-3-30
             * Liukx
             * 添加管理类型
             */
            getDictEmnu: function() {
                this.$post('/sales/Customerdepartgroup!getDictEmnu.action')
                    .then(response => {
                        let data = response.data;
                        if (data.info != 'error') {
                            this.typeEmnu = data.info== null?"":data.info;
                        } else {
                            this.toast('获取管理类型失败！');
                        }
                        })
            },
            /**
             * 清空下拉框选项
             */
            hideSelect: function (selectName){
                    $("#" + selectName).val("");
                    $("#" + selectName).attr("lay-verify","");
                    $("#" + selectName +'Div').hide();
            },
            showSelect:function(selectName){
                $("#" + selectName +'Div').show();
                $("#" + selectName).attr("lay-verify","required");
            },

            send: function () {
                let that = this;
                layui.use(['form'], function () {
                    var form = layui.form,
                        layer = layui.layer;
                    form.render();
                    form.on('submit(submit)', function (data) {
                        let loader = layer.load();
                        $.ajax({
                            url: '/sales/Customerdepartgroup!addOrupdate.action',
                            data: data.field,
                            type: "post",
                            dataType: "json",
                            success: function(res) {
                                if (res.flag == 'success') {
                                    that.toast(res.result);
                                    that.$parent.switchPage('AssignList');
                                } else if (res.flag == 'false') {
                                    that.toast(res.result);
                                } else {
                                    that.toast("系统错误");
                                }
                            },
                            complete: function () {
                                layer.close(loader);
                            }
                        });
                        return false;
                    });
                });
            }
        }
    }
</script>
